<template>
  <div class="fang_item" @click="goDetail(id)">
    <div class="img">
      <img v-lazy="image" alt="" />
    </div>
    <div class="info">
      <div class="store_name">{{ store_name }}</div>
      <p class="price">
        ￥<span>{{ price }}</span>
      </p>

      <div class="tt_info">
        <p class="vip_price">￥{{ vip_price }} <i></i></p>
        <div class="sale">已售{{ sales }}件</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
    },
    cate_id: {
      type: String,
    },
    image: {
      type: String,
    },
    price: {
      type: String,
    },
    sales: {
      type: String,
    },
    store_name: {
      type: String,
    },
    vip_price: {
      type: String,
    },
  },
  methods: {
    goDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
};
</script>

<style lang="scss" scoped>
.fang_item {
  width: 173px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  .img {
    width: 100%;
    height: 173px;
    > img {
      width: 100%;
      height: 100%;
    }
  }

  .info {
    position: relative;
    padding: 12px 10px 16px;
    .store_name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 15px;
      color: #282828;
    }
    .price {
      font-size: 13px;
      color: #fc4141;
      margin-top: 4px;
      span {
        font-size: 17px;
      }
    }

    .tt_info {
      display: flex;margin-top: 4px;
      justify-content: space-between;
      .vip_price {
        
        font-size: 12px;
        color: #282828;
        i {
          display: inline-block;
          width: 23px;
          height: 11px;
          background: url(../../assets/icon/common/goods_vip.png) no-repeat;
          background-size: 100% 100%;
        }
      }
      .sale {
        font-size: 12px;
        color: #aaa;
        
      }
    }
  }
}
</style>
